{% extends 'users/user-base.html' %}

{% load static %}
{% block title %}容器管理{% endblock %}
{% block custom_css %}
    {#    <link href="css/domain.css" rel="stylesheet" title="" type="text/css"/>#}
    <style>
        td {
            vertical-align: middle !important;
        }
    </style>
{% endblock %}

{% block custom_js %}{% endblock %}

{% block contentVMrecy %}
    <script type="text/javascript">
        $(document).ready(function () {

            $("#tab").on("click", ":button", function (event) {
                var container_name = $(this).closest("tr").find("td").eq(2).text();
                var user_name = $(this).closest("tr").find("td").eq(1).text();
                var domain_ip = $(this).closest("tr").find("td").eq(9).text();
                var btn_id = $(this).attr('id');
                if (btn_id == 'container_delete') {
                    $("#bar-text").text("正在进行进行容器回收，请稍后");
                    $("#barModal").modal("show");
                    $("#container_delete").attr("disabled", true);
                    $.ajax({
                        type: "POST",
                        data: {
                            'container_name': container_name,
                            'domain_ip': domain_ip,
                        },
                        url: "/container/container_delete/",
                        success: function (data) {
                            if (data["st"] === 1) {
                                $("#bar-text").text("正在删除容器，请稍后");
                                $("#div-bar").width("50%");
                                if (!$("body").hasClass("modal-open")) {
                                    $("#barModal").modal("show");
                                }
                                $.ajax({
                                    type: "POST",
                                    data: {
                                        'container_data': JSON.stringify(data["container_data"]),
                                        'domain_ip': domain_ip,
                                    },
                                    url: "/container/clear_volume/",
                                    success: function (data) {
                                        if (data["st"] == 1) {
                                            // alert("已同意该虚拟机的申请");
                                            $("#bar-text").text("正在删除容器卷（已完成）");
                                            $("#div-bar").width("100%");
                                            if (!$("body").hasClass("modal-open")) {
                                                $("#barModal").modal("show");
                                            }
                                            $("#btn-bar").bind("click", function () {
                                                window.location.reload();
                                            })
                                        }
                                    },
                                    error: function () {
                                        if ($("body").hasClass("modal-open")) {
                                            $("#barModal").modal("hide");
                                        }
                                        alert("失败");
                                        $("#container_delete").attr("disabled", false);
                                    }
                                })
                                {#window.location.reload();#}
                            } else if (data["st"] === 2) {
                                if ($("body").hasClass("modal-open")) {
                                    $("#barModal").modal("hide");
                                }
                                alert("容器连接成功但删除失败");
                                $("#container_delete").attr("disabled", false);
                            } else if (data["st"] === 3) {
                                if ($("body").hasClass("modal-open")) {
                                    $("#barModal").modal("hide");
                                }
                                alert("容器连接节点失败");
                                $("#container_delete").attr("disabled", false);
                            }
                        },
                        error: function () {
                            alert("false");
                        }
                    })
                }
                if (btn_id == 'container_shutdown') {
                    $.ajax({
                        type: "POST",
                        data: {
                            'container_name': container_name,
                            'user_name': user_name,
                            'domain_ip': domain_ip,
                        },
                        url: "/container/container_shutdown/",
                        success: function (data) {
                            if (data["st"] === 1) {
                                alert("成功");
                                window.location.reload();
                            } else if (data["st"] === 2) {
                                alert("容器连接成功但停止失败");
                            } else if (data["st"] === 3) {
                                alert("容器连接节点失败");
                            }
                        },
                        error: function () {
                            alert("false");
                        }
                    })
                }
                if (btn_id == 'container_start') {
                    $.ajax({
                        type: "POST",
                        data: {
                            'container_name': container_name,
                            'user_name': user_name,
                            'domain_ip': domain_ip,
                        },
                        url: "/container/container_start/",
                        success: function (data) {
                            if (data["st"] === 1) {
                                alert("成功");
                                window.location.reload();
                            } else if (data["st"] === 2) {
                                alert("容器连接成功但停止失败");
                            } else if (data["st"] === 3) {
                                alert("容器连接节点失败");
                            } else if (data["st"] === 4) {
                                alert("容器已经启动");
                            }
                        },
                        error: function () {
                            alert("false");
                        }
                    })
                }
                if (btn_id == 'container_restart') {
                    $.ajax({
                        type: "POST",
                        data: {
                            'container_name': container_name,
                            'user_name': user_name,
                            'domain_ip': domain_ip,
                        },
                        url: "/container/container_restart/",
                        success: function (data) {
                            if (data["st"] === 1) {
                                alert("成功");
                                window.location.reload();
                            } else if (data["st"] === 2) {
                                alert("容器连接成功但重启失败");
                            } else if (data["st"] === 3) {
                                alert("容器连接节点失败");
                            } else if (data["st"] === 4) {
                                alert("容器已经启动");
                            }
                        },
                        error: function () {
                            alert("false");
                        }
                    })
                }
                if (btn_id == 'container_details') {
                    $.ajax({
                        type: "POST",
                        data: {
                            'container_name': container_name,
                            'user_name': user_name,
                            'domain_ip': domain_ip,
                        },
                        url: "/container/container_details/",
                        success: function (data) {
                            if (data["st"] === 1) {
                                alert("挂载点："+data["volume"]);
                                {#window.location.reload();#}
                            } else if (data["st"] === 2) {
                                alert("容器连接成功但重启失败");
                            }
                        },
                        error: function () {
                            alert("false");
                        }
                    })
                }
            });
        })
    </script>

    <div class="dashboard-wrapper">
        <div class="dashboard-ecommerce">
            <div class="container-fluid dashboard-content ">
                <!-- ============================================================== -->
                <!-- pageheader  -->
                <!-- ============================================================== -->
                <div class="row">
                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                        <div class="page-header">
                            <h2 class="pageheader-title">容器管理</h2>
                            <div class="page-breadcrumb">
                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item">容器设置</li>
                                        <li class="breadcrumb-item active" aria-current="page">容器管理</li>
                                    </ol>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- ============================================================== -->
                <!-- end pageheader  -->
                <!-- ============================================================== -->

                <div class="row">
                    <!-- ============================================================== -->
                    <!-- basic table  -->
                    <!-- ============================================================== -->
                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-striped table-bordered first" id="tab">
                                        <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>用户</th>
                                            <th>容器名</th>
                                            <th>镜像</th>
                                            <th>内存</th>
                                            <th>处理器</th>
                                            <th>类型</th>
                                            <th>型号</th>
                                            <th>节点地址</th>
                                            <th>网关地址</th>
                                            <th>所在域</th>
                                            <th style="text-align: center">端口</th>
                                            <th colspan="4" style="text-align: center">操作</th>
                                            <th>更多详情</th>
                                        </tr>
                                        </thead>
                                        {% for container in containerlist %}
                                            <tr>
                                                <td>{{ forloop.counter }}</td>
                                                <td><a href="">{{ container.username }}</a></td>
                                                <td>{{ container.name }}</td>
                                                <td>{{ container.img_name }}</td>
                                                <td>{{ container.memory }}M</td>
                                                <td>{{ container.cpu_cores }}/1024</td>
                                                <td>{{ container.mount_point }}</td>
                                                <td>{{ container.volume_name }}</td>
                                                <td>{{ container.node_ip }}</td>
                                                <td>{{ container.gw_ip }}</td>
                                                <td>{{ container.domain }}</td>
                                                <td>{{ container.port }}</td>
                                                {% if container.is_del == 0 %}
                                                    <td>
                                                        <button type="button" id="container_delete"
                                                                class="btn btn-danger">
                                                            <span class="glyphicon glyphicon-trash">回收</span></button>
                                                    </td>
                                                {% else %}
                                                    <td>已回收</td>
                                                {% endif %}

                                                {% if container.state == 0 %}
                                                    <td>
                                                        <button type="button" id="container_shutdown"
                                                                class="btn btn-info">
                                                            <span class="glyphicon glyphicon-pause">关闭</span></button>
                                                    </td>
                                                {% else %}
                                                    <td><span class="glyphicon glyphicon-stop">已关闭</span></td>
                                                {% endif %}
                                                <td>
                                                    <button type="button" id="container_start" class="btn btn-info">
                                                        <span class="glyphicon glyphicon-fast-forward">启动</span>
                                                    </button>
                                                </td>
                                                <td>
                                                    <button type="button" id="container_restart"
                                                            class="btn btn-warning">
                                                        <span class="glyphicon glyphicon-wrench">重启</span></button>
                                                </td>
                                                <td>
                                                    <button type="button" id="container_details"
                                                            class="btn btn-primary">
                                                        <span class="glyphicon glyphicon-eye-open">更多详情</span></button>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    </table>
                                    {% if containerlist.paginator.num_pages > 1 %}
                                        <nav aria-label="Page navigation example">
                                            <ul class="pagination pull-right" style="padding-right: 50px;">
                                                {% if containerlist.number == 1 %}
                                                    <li class="disabled page-item">
                                                        <a aria-label="First" class="page-link">
                                                            <span aria-hidden="true">&laquo;</span>
                                                        </a>
                                                    </li>
                                                {% else %}
                                                    <li class="page-item">
                                                        <a href="{% url 'container:container_manage' 1 %}"
                                                           aria-label="First" class="page-link">
                                                            <span aria-hidden="true">&laquo;</span>
                                                        </a>
                                                    </li>
                                                {% endif %}
                                                {% if containerlist.has_previous %}
                                                    <li class="page-item">
                                                        <a href="{% url 'container:container_manage' containerlist.previous_page_number %}"
                                                           aria-label="Previous" class="page-link">
                                                            <span aria-hidden="true">&lt;</span>
                                                        </a>
                                                    </li>
                                                {% else %}
                                                    <li class="disabled page-item">
                                                        <a aria-label="Previous" class="page-link">
                                                            <span aria-hidden="true">&lt;</span>
                                                        </a>
                                                    </li>
                                                {% endif %}
                                                {% for num in display_list %}
                                                    {% if containerlist.number == num %}
                                                        <li class="active page-item">
                                                            <a class="page-link">
                                                                <span aria-hidden="true">{{ num }}</span>
                                                            </a>
                                                        </li>
                                                    {% else %}
                                                        <li class="page-item">
                                                            <a href="{% url 'container:container_manage' num %}"
                                                               class="page-link">
                                                                <span aria-hidden="true">{{ num }}</span>
                                                            </a>
                                                        </li>
                                                    {% endif %}
                                                {% endfor %}
                                                {% if vms.has_next %}
                                                    <li class="page-item">
                                                        <a href="{% url 'container:container_manage' containerlist.next_page_number %}"
                                                           aria-label="Next" class="page-link">
                                                            <span aria-hidden="true">&gt;</span>
                                                        </a>
                                                    </li>
                                                {% else %}
                                                    <li class="disabled page-item">
                                                        <a aria-label="Next" class="page-link">
                                                            <span aria-hidden="true">&gt;</span>
                                                        </a>
                                                    </li>
                                                {% endif %}
                                                {% if containerlist.number == containerlist.paginator.num_pages %}
                                                    <li class="disabled page-item">
                                                        <a aria-label="Last" class="page-link">
                                                            <span aria-hidden="true">&raquo;</span>
                                                        </a>
                                                    </li>
                                                {% else %}
                                                    <li class="page-item">
                                                        <a href="{% url 'container:container_manage' containerlist.paginator.num_pages %}"
                                                           aria-label="Last" class="page-link">
                                                            <span aria-hidden="true">&raquo;</span>
                                                        </a>
                                                    </li>
                                                {% endif %}
                                                <span class="total" style="line-height: 30px; margin-left: 10px;">
                                                        共有{{ containerlist.paginator.count }}条记录
                                                    </span>
                                            </ul>
                                        </nav>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



{% endblock %}
